<template>
  <view>


    <view v-if="isAll && isRegister" @click="auth" class="placeholder"></view>
    <uv-popup ref="popup" mode="bottom" round="20" bgColor="#FFF">
      <view class="flex-col-ali p-y-40"
        style="border-top-left-radius: 20rpx;border-top-right-radius: 20rpx; background-color: #FFF;">
        <view class="text-hover-dark m-b-28 font-weight-bold font-40">一键注册禧栻</view>
        <dy-button width="560rpx" height="84rpx" btn_bg="#830102" v-if="radiovalue" @getphonenumber="getphonenumber"
          open-type="getPhoneNumber">一键注册/登录</dy-button>
        <dy-button width="560rpx" height="84rpx" btn_bg="#830102" v-else @click="login">一键注册/登录</dy-button>
        <view class="m-26 font-26 font-weight-middle" @click="close">暂不注册</view>
        <view class="flex-ali">
          <view class="radio flex-cen-ali" @click="radio" :style="{ 'background-color': radiovalue ? '#830102' : '' }">
            <uv-icon v-if="radiovalue" name="checkmark" color="#fff" size="22rpx"></uv-icon>
          </view>
          <text class="text-greey">注册代表我已阅读并同意</text>
          <text class="text-danger" @click="goWeb(2)">《用户隐私协议》</text>
        </view>
      </view>
    </uv-popup>
  </view>

</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useCounter } from '../mixins/userHooks.js';
const { getUserInfo, userInfo, tool } = useCounter();
import { onReady } from '@dcloudio/uni-app';
import { LoginCenterApi } from '../api/serves';
import {
  getToken
} from '../api/app.js';
const popup = ref(null);
const radiovalue = ref(null);
const src = ref('https://cdn.uviewui.com/uview/album/1.jpg');
// Props 定义
const props = defineProps({
  isAll: {
    type: [Boolean],
    default: false
  }
});

const goWeb = (type) => {
  uni.openPrivacyContract({
    success: () => { }, // 打开成功
    fail: () => { }, // 打开失败
    complete: () => { }
  })
};
// 添加auth方法
const auth = async (options = {}) => {
  return new Promise((resolve, reject) => {
    try {
      // 打开登录弹窗
      open();
      // 监听登录成功事件
      const handleLoginSuccess = () => {
        resolve({
          code: 1,
          msg: '登录成功'
        });
      };
      // 监听登录失败事件
      const handleLoginFail = (error) => {
        reject(error);
      };
      // 注册事件监听
      emit('loginSuccess', handleLoginSuccess);
      emit('loginFail', handleLoginFail);
    } catch (error) {
      reject(error);
    }
  });
};

const radio = () => {
  radiovalue.value = !radiovalue.value;
};
const open = () => {
  popup.value.open();
};
const close = async () => {
  popup.value.close();
  await getUserInfo();
  console.log(userInfo, 'userInfo');
  emit('close');
};

const isRegister = computed(() => {
  console.log('isRegister--------------------', !userInfo.value.mobile);
  return !userInfo.value.mobile;
});
onMounted(() => {
  getUserInfo();
});
const login = () => {
  tool.alert('请仔细阅读并同意用户隐私协议');
};

const getphonenumber = async (e) => {
  tool.loading('注册中...');
  try {
    await getToken()
    console.log('授权手机号', e);
    if (!e.code) {
      tool.alert('获取手机号失败');
      tool.loading_h();
      emit('loginFail', { code: -1, msg: '获取手机号失败' });
      return;
    }
    let res = await LoginCenterApi.de_mobile({ code: e.code });
    console.log('授权手机号2222', e);
    if (!res.data?.mobile) {
      tool.alert('解析手机号失败');
      tool.loading_h();
      emit('loginFail', { code: -1, msg: '解析手机号失败' });
      return;
    }

    let { code, data, msg } = await LoginCenterApi.register({ mobile: res.data.mobile });
    if (code != 1) {
      tool.alert(msg || '注册失败');
      tool.loading_h();
      emit('loginFail', { code, msg });
      return;
    }

    tool.loading_h();
    close();
    emit('loginSuccess', { code, data });
  } catch (error) {
    console.error('注册失败:', error);
    tool.loading_h();
    tool.alert('登录失败，请重试');
    emit('loginFail', error);
  }
};
const emit = defineEmits(['close', 'loginSuccess', 'loginFail']);
onReady(() => {
  // popup.value.open();
  console.log(userInfo.value, 'userInfo');
});
defineExpose({
  open,
  auth
});
</script>

<style lang="scss" scoped>
.radio {
  width: 36rpx;
  height: 36rpx;
  border: solid 1rpx #ccc;
  border-radius: 50%;
  margin: 6rpx 10rpx 0;
}

.placeholder {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
}
</style>
